import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'
import { Col, Form, Input, Row, Select } from 'antd'
import Image from 'next/image'
import { Dispatch, SetStateAction, useEffect } from 'react'

import { EnumsRes, Violation } from '@/api/interface'
import { SendSms } from '@/api/modules'
import arrowNext from '@/assets/images/arrow-next.png'
import arrowPre from '@/assets/images/arrow-pre.png'
import light from '@/assets/images/light.png'

import styles from '../styles/index.module.less'

interface Props {
  t: any
  lang: string
  enums: { [key: string]: EnumsRes[] }
  setIsHome: (_: boolean) => void
  setSetup: Dispatch<SetStateAction<number>>
  violation: Partial<Violation>
  setViolation: Dispatch<SetStateAction<Partial<Violation>>>
}

export default function PersonalDetails({
  t,
  lang,
  enums,
  setIsHome,
  setSetup,
  violation,
  setViolation,
}: Props) {
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue(violation)
  }, [])

  const onFinish = async (values: Partial<Violation>) => {
    setViolation({
      ...violation,
      ...values,
      email: values.email?.trim(),
    })
    await SendSms({
      mobile: values.mobile!,
      fullName: values.fullName!,
      email: values.email ? values.email.trim() : '',
    })
    // setCode(data.code)
    setSetup(2)
  }

  const dynamicFormat = (input: string) => {
    const inputArr = input
      .replace(/-/g, '')
      .replace(/[^0-9]+/, '')
      .split('')
    const split = [
      [0, 3],
      [3, 7],
      [7, 14],
      [14, 15],
    ]
    const result = []
    for (let i = 0; i < split.length; i++) {
      const text = inputArr.slice(split[i][0], split[i][1]).join('')
      if (text) {
        result.push(inputArr.slice(split[i][0], split[i][1]).join(''))
      }
    }
    return result.join('-')
  }

  const handleInputChangeEid = (event: any) => {
    const { value } = event.target
    event.target.value = dynamicFormat(value.trim())
  }

  const handleInputChangeNumber = (event: any) => {
    const { value } = event.target
    event.target.value = value.replace(/[^0-9]+/, '')
  }

  const FormLabel = ({ title, required = true }: { title: string; required?: boolean }) => {
    return (
      <span className={styles['form-item-label']}>
        {title}
        {required && <span className={styles['form-item-label-required']}>*</span>}
      </span>
    )
  }

  return (
    <div className={styles['form-personal']}>
      <h2 className={styles['form-title-h2']}>{t['form.personal.title']}</h2>
      <div className={styles['form-alert']}>
        <Image src={light} className={styles['alert-icon']} alt="light" />
        <span className={styles['alert-text']}>{t['form.personal.alert']}</span>
      </div>
      <Form layout="vertical" name="personal" form={form} onFinish={onFinish}>
        <Row gutter={24}>
          <Col md={12} xs={24}>
            <Form.Item label={<FormLabel title={t['form.personal.fullName']} />}>
              <Form.Item
                name="fullName"
                rules={[{ required: true, message: t['form.personal.fullName.error'] }]}
              >
                <Input maxLength={100} placeholder={t['form.personal.placeholder.fullName']} />
              </Form.Item>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item label={<FormLabel title={t['form.personal.nationality']} />}>
              <Form.Item
                name="nationality"
                rules={[{ required: true, message: t['form.personal.nationality.error'] }]}
              >
                <Select
                  options={enums.Nationality.map((item) => ({
                    value: item.key,
                    label: item.value[lang === 'en-US' ? 'en' : 'ar'],
                  }))}
                  allowClear
                  showSearch
                  optionFilterProp="label"
                  placeholder={t['form.personal.placeholder.nationality']}
                  suffixIcon={lang === 'en-US' ? <CaretRightOutlined /> : <CaretLeftOutlined />}
                />
              </Form.Item>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item label={<FormLabel title={t['form.personal.complainant']} />}>
              <Form.Item
                name="complainantRole"
                rules={[{ required: true, message: t['form.personal.complainant.error'] }]}
              >
                <Select
                  options={enums.Complainant.map((item) => ({
                    value: item.key,
                    label: item.value[lang === 'en-US' ? 'en' : 'ar'],
                  }))}
                  allowClear
                  showSearch
                  optionFilterProp="label"
                  placeholder={t['form.personal.placeholder.complainant']}
                  suffixIcon={lang === 'en-US' ? <CaretRightOutlined /> : <CaretLeftOutlined />}
                />
              </Form.Item>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item label={<FormLabel title={t['form.personal.emiratesID']} />}>
              <Form.Item
                name="eid"
                validateTrigger="onBlur"
                rules={[
                  {
                    required: true,
                    pattern: /^\d{3}-\d{4}-\d{7}-\d/,
                    message: t['form.personal.emiratesID.error'],
                  },
                ]}
              >
                <Input
                  maxLength={18}
                  placeholder={t['form.personal.placeholder.emiratesID']}
                  onInput={handleInputChangeEid}
                />
              </Form.Item>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item label={<FormLabel title={t['form.personal.email']} />}>
              <Form.Item
                name="email"
                rules={[{ required: true, type: 'email', message: t['form.personal.email.error'] }]}
              >
                <Input
                  maxLength={200}
                  // onInput={handleInputChange}
                  placeholder={t['form.personal.placeholder.email']}
                />
              </Form.Item>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item
              label={<FormLabel title={t['form.personal.mobile']} />}
              className={styles['form-mobile']}
            >
              <Row gutter={16}>
                <Col span={4}>
                  <div className={styles['form-mobile-area']}>
                    <span className={styles['area-text']}>971</span>
                  </div>
                </Col>
                <Col span={20}>
                  <Form.Item
                    name="mobile"
                    validateTrigger="onBlur"
                    rules={[
                      {
                        required: true,
                        pattern: /^5\d{6,8}$/,
                        message: t['form.personal.mobile.error'],
                      },
                    ]}
                  >
                    <Input
                      maxLength={9}
                      onInput={handleInputChangeNumber}
                      placeholder="5xxxxxxxx"
                    />
                  </Form.Item>
                </Col>
              </Row>
              <span className={styles['form-title-extra']}>{t['form.personal.mobile.extra']}</span>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item
              label={<FormLabel title={t['form.personal.unifiedNumber']} required={false} />}
            >
              <Form.Item
                name="unifiedNumber"
                validateTrigger="onBlur"
                rules={[
                  {
                    required: false,
                    pattern: /^\d{8,10}$/,
                    message: t['form.personal.unifiedNumber.error'],
                  },
                ]}
              >
                <Input
                  maxLength={10}
                  onInput={handleInputChangeNumber}
                  placeholder={t['form.personal.unifiedNumber']}
                />
              </Form.Item>
            </Form.Item>
          </Col>
        </Row>
        <div className={styles['form-button']}>
          <div className={styles['form-button-pre']} onClick={() => setIsHome(true)}>
            <Image src={arrowPre} className={styles['button-icon']} alt="pre" />
            <span className={styles['button-text']}>{t['form.button.previous']}</span>
          </div>
          <div className={styles['form-button-next']} onClick={() => form.submit()}>
            <span className={styles['button-text']}>{t['form.button.next']}</span>
            <Image src={arrowNext} className={styles['button-icon']} alt="next" />
          </div>
        </div>
      </Form>
    </div>
  )
}
